<template>
  <div>
    <div class="colorBox" :style="{background:bgcColor}"></div>
    <div>
      R:<input type="range"  max="250" v-model="one"/> <span>{{one}}</span>
      G:<input type="range"  max="250" v-model="two"/><span>{{two}}</span>
      B:<input type="range"  max="250" v-model="three"/><span>{{three}}</span>
    </div>
  </div>
</template>
<script>
export default {
    data(){
        return {
            one:1,
            two:1,
            three:1,
        }
    },
    computed:{
        bgcColor(){
            return `rgb(${this.one},${this.two},${this.three})`
        }
    }
}
</script>
<style scoped>
.colorBox {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>
